<template>
    <Transition name="video">
        <div v-show="flag" class="people_Big">
            <div :class="{ 'bacindex': colorindex == -1 }" class="zimu_right">
                <div @click="scroll_top" class="fangdajing">
                    <div class="left">
                        <div class="yaun"></div>
                        <div class="gun"></div>
                    </div>
                </div>
                <div @click="zimu_tab(index)" :class="{ 'colorindex': index == colorindex }" v-for="item, index in list"
                    :key="index">{{ item.Number
                    }}
                </div>
            </div>
            <div class="title">
                <div @click="people_close" class="back">
                    <people_back />
                </div>
                选择联系人
            </div>
            <div @touchmove="scroll($event)" class="poa btm lianxiren_scroll">
                <div class="search_big">
                    <inputdiv v-model:value="value" :text="input_text" />
                </div>
                <div class="list_big">
                    <div v-for="item, index in list" class="list" :key="index">
                        <Transition name="video1">
                            <div v-show="index == colorindex" class="zimu_top">
                                {{ item.Number }}
                            </div>
                        </Transition>
                        <div ref="ren" class="list_zimu">
                            {{ item.Number }}
                        </div>
                        <div v-for="item2 in item.arr" class="user" :key="item2.userId">
                            <img
                                :src="'http://43.138.15.137:3000' + (!item2.userAvatar ? '/assets/avatar/default.png' : item2.userAvatar)">
                            <div class="user_center">
                                <div class="shang">
                                    {{ item2.userNickname }}
                                </div>
                                <div class="xia">
                                    {{ item2.userDesc }}
                                </div>
                            </div>
                            <div class="right">
                                <div class="video_messge">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </Transition>
</template>
<script setup>
import pinyin from "pinyin";
import { ref, defineProps, defineAsyncComponent, defineEmits, onMounted, nextTick } from 'vue';
import { get_people } from '../../api/api'
const people_back = defineAsyncComponent(() => import('../common/icon_back.vue'))
const inputdiv = defineAsyncComponent(() => import('../common/search_input.vue'))
const emit = defineEmits(['update:flag'])
const props = defineProps(
    {
        flag: {
            type: Boolean,
            default: () => false,
        }
    }
)
let colorindex = ref(-1)
let ren = ref([])
let list = ref([])
let value = ref('')
let input_text = ref('搜搜用户昵称')
get_people(`api/user/${JSON.parse(localStorage.getItem('user')).userId}/getContact`).then(res => {
    if (res.data.code == 200) {
        res.data.data.forEach(item => {
            if (!Number(pinyin(item.userNickname)[0][0].substring(0, 1))) {
                list.value.push(
                    {
                        Number: pinyin(item.userNickname)[0][0].substring(0, 1).toLocaleUpperCase(),
                        arr: [],
                    }
                )
            }
        })
        for (let i = 0; i < list.value.length - 1; i++) {
            for (let m = 0; m < list.value.length - i - 1; m++) {
                if (list.value[m].Number > list.value[m + 1].Number) {
                    let val = list.value[m];
                    list.value[m] = list.value[m + 1];
                    list.value[m + 1] = val;
                }
            }
        }
        for (let i = 0; i < list.value.length; i++) {
            for (let j = i + 1; j < list.value.length; j++) {
                if (list.value[i].Number == list.value[j].Number) {
                    list.value.splice(j, 1);
                    j--;
                }
            }
        }
        res.data.data.forEach(item => {
            let str = pinyin(item.userNickname)[0][0].substring(0, 1).toLocaleUpperCase()
            if (Number(str)) {
                list.value[list.value.length - 1].arr.push(item)
                return
            }
            list.value.forEach(item2 => {
                if (item2.Number == str) {
                    item2.arr.push(item)
                }
            })
        })
        list.value.push(
            {
                Number: '#',
                arr: [],
            }
        )
    }
})
function zimu_tab(index) {
    document.querySelector('.lianxiren_scroll').scrollTop = ren.value[index].offsetTop + document.querySelector('.list_big').offsetTop
    colorindex.value = index
}
function scroll_top() {
    document.querySelector('.lianxiren_scroll').scrollTop = 0
    colorindex.value = -1
}
function scroll() {
    let top = document.querySelector('.list_big').offsetTop
    let scrollTop = document.querySelector('.lianxiren_scroll').scrollTop
    colorindex.value = ren.value.findIndex(item => {
        return scrollTop <= item.offsetTop + top
    }) - 1;
}
function people_close() {
    emit('update:flag', false)
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.zimu_top {
    position: fixed;
    top: r(44);
    left: 0;
    height: r(30);
    width: 100%;
    background-color: #161622;
    padding-left: r(16);
    color: #fff;
    font-size: r(16);
    display: flex;
    align-items: center;
    z-index: 11;
}

.bacindex {
    .yaun {
        border: r(2) solid #face15;
    }

    .gun {
        background-color: #face15;
    }
}

.fangdajing {
    position: absolute;
    top: r(-20);
    height: r(10);
    left: 50%;
    transform: translateX(-50%);
}

.colorindex {
    color: #face15;
}

.yaun {
    border-radius: 50%;
    border: r(2) solid #fff;
    width: r(10);
    height: r(10);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-70%, -75%);
}

.gun {
    width: r(7);
    height: r(2);
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: rotate(45deg) translate(20%, 100%);
    border-radius: r(2);
}

.left {
    position: relative;
    width: r(20);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zimu_right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    right: r(10);
    font-size: r(12);
    text-align: center;
    line-height: r(18);
    z-index: 3;
}

.video_messge {
    width: r(20);
    height: r(20);
    border-radius: 50%;
    box-sizing: border-box;
    border: r(2) solid #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;

    div {
        width: r(2);
        height: r(2);
        background-color: #fff;
        border-radius: 50%;
    }
}

.user_center {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: #fff;
    font-size: r(14);
    justify-content: space-evenly;
    margin-left: r(10);

    .shang {
        color: #e8e8e9;
    }

    .xia {
        color: #8b8c96;
        font-size: r(12);
    }
}

.user {
    display: flex;
    height: r(50);
    width: 100%;
    margin-top: r(20);
    position: relative;
    padding-left: r(7);


    img {
        border-radius: 50%;
        height: 100%;
        width: r(50);
    }
}

.list {
    margin-top: r(20);

    .list_zimu {
        height: r(30);
        color: #e8e8e9;
        font-size: r(16);
        display: flex;
        align-items: center;
    }

    .right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
}

.list_big {
    position: relative;
    width: 100%;
    color: #fff;
    padding: 0 r(17);
    padding-right: r(40);
}

.search_big {
    margin: r(10) r(20);
    height: r(44);
}

.btm {
    overflow-y: scroll;
    margin-top: r(44);
    padding-bottom: r(44);
}

.back {
    position: absolute;
    top: 50%;
    left: r(20);
    transform: translateY(-50%);
    width: r(18);
    height: r(18);
}

.title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: r(16);
    color: #fff;
    height: r(44);
    border: r(1) solid #333;
    z-index: 12;
}

.people_Big {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #161622;
    height: 100%;
    width: 100%;
    z-index: 11;
}

.video-enter-active {
    animation: shadow 0.5s ease;
}

.video-leave-active {
    animation: shadow 0.5s ease reverse;
}

.video1-enter-active {
    animation: shadow2 0.2s ease;
}

.video1-leave-active {
    animation: shadow2 0.2s ease reverse;
}

@keyframes shadow {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes shadow2 {
    from {
        transform: translateY(-100%);
        opacity: 0;
        color: #ffffff00;
    }

    to {
        transform: translateY(0%);
        opacity: 1;
        color: #fff;
    }
}
</style> 